<template>
    <div class="box">
        <Codemirror class="code" v-model="code_value" :style="{ height: '100%' }" :extensions="extensions" :autofocus="true"
            :disabled="false" @ready="handleClick('ready', $event)" @change="handleClick('change', $event)"
            @focus="handleClick('focus', $event)" @blur="handleClick('blur', $event)" />
    </div>
</template>

<script lang="ts" setup>

import { ref } from "vue";
import { Codemirror } from "vue-codemirror";
import { oneDark } from "@codemirror/theme-one-dark";
import { StreamLanguage } from "@codemirror/language";
import { yaml } from "@codemirror/legacy-modes/mode/yaml";

let code_value = ref('');

const code_value_change = (e: any) => {
    code_value.value = e
}

const extensions = [StreamLanguage.define(yaml), oneDark];
const handleClick = (type: string, val: Event) => {
    console.log(type, val);
};

defineExpose({
    code_value,
    code_value_change
})

</script>

<style>
.box {
    width: 100%;
    height: 600px;
    border: 1px solid #f00;
}

.code {
    width: 300px;
    height: 300px;
}
</style>
